<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
<?=$title;?>
</title> 
<script src="http://maps.google.com/maps?file=api&amp;v=2.113&amp;key=ABQIAAAA1QnAxBtPWpvkkIJ1M7uNRhRg8ea_49lyqtDTy_ytR6v-HqmzORRUZuFz8QQsoPvQ-uEZSLs4m1nYsw&sensor=true" type="text/javascript"></script> 
<script type="text/javascript"> 
//<![CDATA[

var data = [
<?php 
// Output from database to JSON format ###
$str="";
foreach ($location as $row):
$str.= ",{ user: "."'".$row['user_name']."'".", lng: ".$row['loc_lng'].", lat: ".$row['loc_lat'].", loc: "."'".$row['loc_name']."'".", img: "."'".$row['loc_img']."'".", detail: "."'".$row['loc_detail']."'"."}"."\n";
endforeach;
$str=substr($str,1);
echo $str; 
?>
];

var latUrl = "<?=$lat;?>";
var lngUrl = "<?=$lng;?>";		
var map, route;
var points = [];
var gmarkers = [];
var count =0;
var stopClick = false;

function addIcon(icon) 
	{ 
		 icon.shadow = "http://mcmarkers.googlepages.com/iimm1-shadow.png ";
		 icon.iconSize = new GSize(32, 32);
		 icon.shadowSize = new GSize(37, 34);
		 icon.iconAnchor = new GPoint(15, 34);
		 icon.infoWindowAnchor = new GPoint(19, 2);
		 icon.infoShadowAnchor = new GPoint(18, 25);
	}

function addClickevent(marker) 
	{ 
		 GEvent.addListener(marker, "click", function() 
			 {
				 marker.openInfoWindowHtml(marker.content);
				 count = marker.nr;
				 stopClick = true;
			 });
		 return marker;
	}	

function buildMap() 
	{
		if(GBrowserIsCompatible()) 
			{
				function colourWindow() 
					{
						// Change any <imgs> that use iw2.png
						var imgs = document.getElementsByTagName("img")
						for (var n = 0 ; n < imgs.length ; n++ )
						{
						  var a=imgs[n].src;
						  if (a.indexOf("iw2.png") > -1) 
								{
									 imgs[n].src="/gmap/image/blueiw.png";
								}
						}  
						// Change any <divs> that use "white"
						var divs = document.getElementsByTagName("div")
						for (var n = 0 ; n < divs.length ; n++ )
						{
							if (divs[n].style.backgroundColor == "white") 
								{
									divs[n].style.backgroundImage="URL(/gmap/image/blue.png)";
								}
						 }  
			}

  map = new GMap2(document.getElementById("map"));
  map.setCenter(new GLatLng(latUrl, lngUrl), 11);
  map.addControl(new GMapTypeControl()); 

  // custom icon marker
  var icon = new GIcon();
  icon.image = "/gmap/icon/iimm1-blue.png";
  addIcon(icon);


  for(var i = 0; i < data.length; i++) 
		{
		   points[i] = new GLatLng(data[i].lat, data[i].lng);
		   gmarkers[i] = new GMarker(points[i], icon);

		   // Infowindow
			var html = "<div class='infowindow'><img src=../../uploads/"+ data[i].img +"><br/>" + data[i].detail + "<br/><strong>Post by :</strong>" + data[i].user +"</div>";
		   gmarkers[i].content = html;
		   gmarkers[i].nr = i;
		   addClickevent(gmarkers[i]);
		   map.addOverlay(gmarkers[i]);		   
		   map.getInfoWindow(gmarkers[i]);
		   colourWindow(gmarkers[i]);
		  }

  // Open infowindow of first marker
  gmarkers[0].openInfoWindowHtml( gmarkers[0].content);

  route =setTimeout("anim()", 3600);
 }
} 

function anim() {

 count++;
 if(count < points.length) {

  // Use counter as array index
  map.panTo(points[count]);
  gmarkers[count].openInfoWindowHtml( gmarkers[count].content);
  var delay = 3400;
  if((count+1) != points.length)
   var dist = points[count].distanceFrom(points[count+1]);

  // Adjust delay
  if( dist < 10000 ) {
   delay = 2000;
  }
  if( dist > 80000 ) {
   delay = 4200;
  }
  route = setTimeout("anim()", delay);
 }
  else {

  clearTimeout(route);
  count = 0;
  route = null;
  anim();
 }
}

//]]>
</script>

<style type="text/css">

body { font-family: Verdana, Sans-serif; }

#map {
    height: 350px;
	width: 400px;
	border: 1px solid gray;
	margin-top: 8px;
	margin-left: 8px;
	overflow: hidden;
}
.infowindow { font-size: smaller;
	text-align: left;
	margin:0;
	color:white;

}
</style>
</head> 
<body onload="buildMap()" onunload="GUnload()"> 
<div id="map"></div>
</div>
</body> 
</html>
